<template>
  <div v-if="goodsDetail">
    <van-nav-bar
      :title="goodsDetail.proname"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe">
      <van-swipe-item
        v-for="(item, index) in goodsDetail.banners[0].split(',')"
        :key="item"
        class="swipe-item"
      >
        <!-- <img :src="item" @click="preview(index)" /> -->
        <img :src="item" @click="previewFn(index)" />
      </van-swipe-item>
    </van-swipe>
    <!-- 组件的方式渲染图片预览 -->
    <van-image-preview
      v-model="show"
      :images="goodsDetail.banners[0].split(',')"
      :startPosition="startPosition"
      @change="onChange"
    >
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
    <!-- 商品详情信息 -->
    <div style="padding: 10px">
      <van-tag type="danger" size="large">自营</van-tag>
      <span v-text="goodsDetail.proname" style="margin-left: 10px"></span>
      <p style="color: red; font-weight: 900">
        ￥{{ goodsDetail.originprice | formatPrice }}
      </p>
    </div>
    {{ name }}
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        v-if="getTotal > 0"
        :badge="getTotal"
        @click="goToCart"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        v-else
        @click="goToCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="add" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail } from '@/api/goods'
import { ImagePreview } from 'vant'
// import { mapGetters, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import cartBadgeMixins from '@/mixins'
export default {
  // computed: {
  //   ...mapGetters('cart', ['getTotal'])
  // },
  mixins: [cartBadgeMixins],
  name: 'GoodsDetail',
  // components: {
  //   [ImagePreview.Component.name]: ImagePreview.Component
  // },
  data () {
    return {
      goodsDetail: null,
      show: false,
      startPosition: 0, // 预览图片的初始索引
      index: 0,
      name: '李春风'
    }
  },

  mounted () {
    this.getGoodsDetailData()
  },
  methods: {
    ...mapMutations('cart', ['addToCart']),
    async getGoodsDetailData () {
      const res = await getGoodsDetail(this.$route.query.proid)

      this.goodsDetail = res.data
    },
    onClickLeft () {
      this.$router.back()
    },
    onChange (index) {
      this.index = index
    },
    preview (index) {
      this.startPosition = index
      this.show = true
    },
    // 函数的方式去调用图片预览
    previewFn (index) {
      ImagePreview({
        images: this.goodsDetail.banners[0].split(','),
        startPosition: index
      })
    },
    add () {
      const goods = {
        proid: this.goodsDetail.proid,
        proname: this.goodsDetail.proname,
        price: this.goodsDetail.originprice,
        img: this.goodsDetail.img1,
        num: 1,
        checked: true
      }

      this.addToCart(goods)
    },
    // 跳转到购物车
    goToCart () {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss" scoped>
.swipe {
  width: 100%;
  height: 350px;
}
.swipe-item {
  width: 100%;
  height: 350px;
}
.swipe-item img {
  width: 100%;
  height: 100%;
}
</style>
